<template>
  <div class="home">


    <el-row>
      <span>
      <i class="el-icon-s-promotion"></i>
      购物车
</span>
      <span>总金额：</span>{{ sum }}
      <el-button type="danger" size="mini" style="float: right" @click="remove">删除</el-button>
      <el-button type="primary" size="mini" style="float: right" @click="pay">结算</el-button>
    </el-row>
    <el-card class="page-wrap">
      <el-table :data="listData"
                @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column width="180px" label="图片">
          <template v-slot="{ row }">
            <img :src="aa+row.img" alt="" class="picture"/>
          </template>
        </el-table-column>

        <el-table-column label="商品名" prop="name"></el-table-column>
        <el-table-column label="价格" prop="prise"></el-table-column>
        <el-table-column label="数量" prop="number">

        </el-table-column>

        <el-table-column label="操作" type="primary">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-minus" @click="jian(scope.row)"></el-button>
            <el-button type="primary" size="mini" icon="el-icon-plus" @click="add(scope.row)"></el-button>


          </template>


        </el-table-column>
      </el-table>

      <el-row type="flex" justify="center" style="margin-top: 30px">
        <el-pagination
            background
            :total="total"
            layout="prev, pager, next"
            :page-size="size"
            @current-change="currentChange">
        </el-pagination>
      </el-row>

    </el-card>

  </div>
</template>

<script>
import Request from "../api/request";
import _ from "lodash";

export default {
  data() {
    return {
      listData: [],
      aa: 'data:image/png;base64,',
      currentPage: 1,
      size: 2,

      total: 2,
      multipleSelection: [],
      car: []
    };
  },
  created() {
    this.getList();
  },

  computed: {

    // this.   .reduce((sum3, obj) => (sum3 += obj.price), 0);
    sum() {

      return this.multipleSelection.reduce((sum3, item) => {
        return sum3 = item.prise * item.number
      }, 0)

    }

  },
  methods: {
    remove() {
      let cars = []


      this.multipleSelection.forEach(e => {
        this.car.forEach(item => {
          if (item.carid === e.id) {
            cars.push(item)
          }
        })

      })
      Request.delete("car", cars).then(res => {

      })


    },

    pay() {
      let cars = []

      this.multipleSelection.forEach(e => {
        this.car.forEach(item => {
          if (item.carid === e.id) {
            cars.push(item)
          }
        })

      })
      Request.post("car/pay", cars).then(res => {
        this.getList()
      })


    },
    jian(row) {
      _.throttle(() => {
        let car = this.car.filter(item => item.carid === row.id)
        car[0].number = row.number - 1
        if (row.number === 0) {
          Request.delete("car", {data: car})
        } else {
          Request.put("car", car)
        }
        this.getList()
      }, 1000, {trailing: true})()
    },
    add(row) {
      _.throttle(() => {
        let car = this.car.filter(item => item.carid === row.id)
        car[0].number = row.number + 1
        Request.put("car", car).then()
        this.getList()
      }, 1000, {trailing: true})()
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection)
    },
    getList() {
      Request.get(
          "/car?current=" + this.currentPage +
          "&size=" + this.size)
          .then(res => {
            this.loading = false
            this.listData = []

            res.data.data.records.forEach(e => {

              if (e.type === 1) {
                this.listData.push({
                  id: e.carid,
                  name: e.data.goodsName,
                  prise: e.data.goodsPrice,
                  number: e.number,
                  img: e.data.goodsImg

                })
                e.data.goodsImg = null
              }
              if (e.type === 2) {

                this.listData.push({
                  id: e.carid,
                  name: e.data.hotelName,
                  prise: e.data.hotelPraise,
                  number: e.number,
                  img: e.data.hotelImg
                })
                e.data.hotelImg = null
              }
              if (e.type === 3) {

                this.listData.push({
                  id: e.carid,
                  name: e.data.pname,
                  prise: e.data.pprice,
                  number: e.number,
                  img: e.data.pimg
                })
                e.data.pImg = null

              }
            })
            this.car = res.data.data.records
            // 分页赋值
            this.currentPage = res.data.data.current
            this.size = res.data.data.size
            this.total = res.data.data.total

          })
    },
    currentChange(page) {
      this.currentPage = page
      this.getList();
    },
    show(id) {


    },
  },
};
</script>
<style lang="less" scoped>
.home {
  width: 60%;
  margin: 20px auto;


  span {
    color: #fba320;

    i {
      color: #fba320;
      font-size: 24px;

    }
  }

  .page-wrap {
    width: 100%;
    height: 100%;
    margin-top: 20px;

    p {
      color: #000;
    }

    .content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 20px;
      border-bottom: 1px solid rgb(214, 212, 212);

      .picture {
        width: 300px;

        img {
          width: 100%;
        }
      }

      .info {
        flex: 1;
        margin-left: 40px;

        h3 {
          margin-bottom: 20px;
          cursor: pointer;
        }
      }
    }
  }
}

::v-deep .el-card__body {
  padding: 10px;
}

.home {
  width: 60%;
  height: 800px;
  margin: 20px auto;
}

.page-wrap {
  margin-top: 30px;
  /* height: 600px; */
}

.picture {
  width: 180px;
  height: 180px;
}
</style>
